<template>
  <div>
    <h1>Bottom sheets（底部工作表）</h1>
    <p>
      底部表单是一个经过修改的 v-dialog , 从屏幕的底部滑出，类似于
      v-bottom-navigation。
      底部导航组件用于按钮和特定的应用程序级操作，而底部工作表可以包含任何内容。
    </p>

    <div class="d-flex flex-row justify-center">
      <v-bottom-sheet>
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="red" dark v-bind="attrs" v-on="on">
            Open v-bottom-sheet
          </v-btn>
        </template>
        <v-sheet class="text-center" height="200px">
          <div class="my-3">This is a bottom sheet</div>
        </v-sheet>
      </v-bottom-sheet>
    </div>

    <br />
    <h2>属性</h2>

    <br />
    <h3>inset</h3>
    <p>
      底部工作表可以被嵌入，将桌面上的最大宽度减少到70%。 可以使用 ** width **
      prop来进一步手动减少这种情况。
    </p>
    <div class="text-center">
      <v-bottom-sheet v-model="sheet" inset>
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="orange" dark v-bind="attrs" v-on="on">
            Open Inset
          </v-btn>
        </template>
        <v-sheet class="text-center" height="200px">
          <v-btn class="mt-6" text color="error" @click="sheet = !sheet">
            close
          </v-btn>
          <div class="my-3">This is a bottom sheet using the inset prop</div>
        </v-sheet>
      </v-bottom-sheet>
    </div>

    <br />
    <h3>v-model</h3>
    <p>
      底部工作表可以使用 v-model 来控制。
      你可以使用它来关闭他们，或者如果你不能使用 activator 插槽。
    </p>
    <div class="text-center">
      <v-btn color="blue" dark @click="sheet1 = !sheet1"> Open v-model </v-btn>
      <v-bottom-sheet v-model="sheet1">
        <v-sheet class="text-center" height="200px">
          <v-btn class="mt-6" text color="red" @click="sheet1 = !sheet1">
            close
          </v-btn>
          <div class="py-3">
            This is a bottom sheet using the controlled by v-model instead of
            activator
          </div>
        </v-sheet>
      </v-bottom-sheet>
    </div>

    <br />
    <h3>persistent</h3>
    <p>保留的底部工作表无法通过在外部单击来关闭。</p>
    <div class="text-center">
      <v-bottom-sheet v-model="sheet2" persistent>
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="green" dark v-bind="attrs" v-on="on">
            Open Persistent
          </v-btn>
        </template>
        <v-sheet class="text-center" height="200px">
          <v-btn class="mt-6" text color="error" @click="sheet2 = !sheet2">
            close
          </v-btn>
          <div class="py-3">
            This is a bottom sheet using the persistent prop
          </div>
        </v-sheet>
      </v-bottom-sheet>
    </div>

    <br />
    <h2>其他</h2>
    <br />
    <h3>音乐播放器</h3>
    <p>
      使用嵌入式底部工作表，你可以制作一些实用的组件，比如这个简单的音乐播放器。
    </p>
    <div class="text-center">
      <v-bottom-sheet inset>
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="red" dark v-bind="attrs" v-on="on"> Open Player </v-btn>
        </template>
        <v-card tile>
          <v-progress-linear
            :value="50"
            class="my-0"
            height="3"
          ></v-progress-linear>

          <v-list>
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title>The Walker</v-list-item-title>
                <v-list-item-subtitle
                  >Fitz & The Trantrums</v-list-item-subtitle
                >
              </v-list-item-content>

              <v-spacer></v-spacer>

              <v-list-item-icon>
                <v-btn icon>
                  <v-icon>mdi-rewind</v-icon>
                </v-btn>
              </v-list-item-icon>

              <v-list-item-icon
                :class="{ 'mx-5': $vuetify.breakpoint.mdAndUp }"
              >
                <v-btn icon>
                  <v-icon>mdi-pause</v-icon>
                </v-btn>
              </v-list-item-icon>

              <v-list-item-icon
                class="ml-0"
                :class="{ 'mr-3': $vuetify.breakpoint.mdAndUp }"
              >
                <v-btn icon>
                  <v-icon>mdi-fast-forward</v-icon>
                </v-btn>
              </v-list-item-icon>
            </v-list-item>
          </v-list>
        </v-card>
      </v-bottom-sheet>
    </div>

    <br />
    <h3>在列表中打开</h3>
    <p>通过将功能列表合并到底部表单中，您可以创建一个简单的 ‘open in’ 组件。</p>
    <div class="text-center">
      <v-bottom-sheet v-model="sheet3">
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="purple" dark v-bind="attrs" v-on="on"> Open In </v-btn>
        </template>
        <v-list>
          <v-subheader>Open in</v-subheader>
          <v-list-item
            v-for="tile in tiles"
            :key="tile.title"
            @click="sheet3 = false"
          >
            <v-list-item-avatar>
              <v-avatar size="32px" tile>
                <img
                  :src="`https://cdn.vuetifyjs.com/images/bottom-sheets/${tile.img}`"
                  :alt="tile.title"
                />
              </v-avatar>
            </v-list-item-avatar>
            <v-list-item-title>{{ tile.title }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-bottom-sheet>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    sheet: false,
    sheet1: false,
    sheet2: false,
    sheet3: false,
    tiles: [
      { img: "keep.png", title: "Keep" },
      { img: "inbox.png", title: "Inbox" },
      { img: "hangouts.png", title: "Hangouts" },
      { img: "messenger.png", title: "Messenger" },
      { img: "google.png", title: "Google+" },
    ],
  }),
};
</script>